<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width"/>
    <title>图层控制</title>
    <link href="../css/layerControl.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="box">
    <div class="mapClass">
        <img src="../img/streets.png"><br/>
        2D平面图
    </div>
    <div class="mapClass">
        <img src="../img/satellite.png"><br/>
        卫星图
    </div>
    <div class="mapClass">
        <img src="../img/indoor.png"><br/>
        室内地图
    </div>
</div>
<div class="box">
    <div class="circleImg" style="background-image: url('../img/fireUnit.png')"></div>
    <div class="mapStyle">消防单位</div>
    <div class="check">
        <div class="testswitch">
            <input class="testswitch-checkbox" id="onoffswitch" type="checkbox">
            <label class="testswitch-label" for="onoffswitch">
                <span class="testswitch-inner" data-on="ON" data-off="OFF"></span>
                <span class="testswitch-switch"></span>
            </label>
        </div>
    </div>
</div>
<div class="box">
    <div class="circleImg" style="background-image: url('../img/linkUnit.png')"></div>
    <div class="mapStyle">联动单位</div>
    <div class="check">
        <div class="testswitch">
            <input class="testswitch-checkbox" id="onoffswitch1" type="checkbox">
            <label class="testswitch-label" for="onoffswitch1">
                <span class="testswitch-inner" data-on="ON" data-off="OFF"></span>
                <span class="testswitch-switch"></span>
            </label>
        </div>
    </div>
</div>
<div class="box">
    <div class="circleImg" style="background-image: url('../img/device.png')"></div>
    <div class="mapStyle">消防设施</div>
    <div class="check">
        <div class="testswitch">
            <input class="testswitch-checkbox" id="onoffswitch2" type="checkbox">
            <label class="testswitch-label" for="onoffswitch2">
                <span class="testswitch-inner" data-on="ON" data-off="OFF"></span>
                <span class="testswitch-switch"></span>
            </label>
        </div>
    </div>
</div>
<div class="box">
    <div class="circleImg" style="background-image: url('../img/dangerousArea.png')"></div>
    <div class="mapStyle">危险场所</div>
    <div class="check">
        <div class="testswitch">
            <input class="testswitch-checkbox" id="onoffswitch3" type="checkbox">
            <label class="testswitch-label" for="onoffswitch3">
                <span class="testswitch-inner" data-on="ON" data-off="OFF"></span>
                <span class="testswitch-switch"></span>
            </label>
        </div>
    </div>
</div>
<div class="box">
    <div class="circleImg" style="background-image: url('../img/importantUnit.png')"></div>
    <div class="mapStyle">重点单位</div>
    <div class="check">
        <div class="testswitch">
            <input class="testswitch-checkbox" id="onoffswitch4" type="checkbox">
            <label class="testswitch-label" for="onoffswitch4">
                <span class="testswitch-inner" data-on="ON" data-off="OFF"></span>
                <span class="testswitch-switch"></span>
            </label>
        </div>
    </div>
</div>
<div class="box title">
    地图风格
</div>
<div class="box">
    <div class="circleImg" style="background-image: url('../img/streets.png')"></div>
    <div class="mapStyle">经典地图</div>
    <div class="check">
    <input class="input1" type="radio" value="guangpan" name="choose" id="style1">
    <label class="input1-label" for="style1"></label>
    </div>
</div>
<div class="box">
    <div class="circleImg" style="background-image: url('../img/dark.png')"></div>
    <div class="mapStyle">午夜黑风格</div>
    <div class="check">
    <input class="input1" type="radio" value="guangpan" name="choose" id="style2" checked="checked">
    <label class="input1-label" for="style2"></label>
    </div>
</div>
<div class="box">
    <div class="circleImg" style="background-image: url('../img/light.png')"></div>
    <div class="mapStyle">浅色风格</div>
    <div class="check">
    <input class="input1" type="radio" value="guangpan" name="choose" id="style3">
    <label class="input1-label" for="style3"></label>
    </div>
</div>
<div class="box">
    <div class="circleImg" style="background-image: url('../img/emerald.png')"></div>
    <div class="mapStyle">绿宝石风格</div>
    <div class="check">
    <input class="input1" type="radio" value="guangpan" name="choose" id="style4">
    <label class="input1-label" for="style4"></label>
    </div>
</div>
<div class="box">
    <div class="circleImg" style="background-image: url('../img/high-contrast.png')"></div>
    <div class="mapStyle">黑白风格</div>
    <div class="check">
        <input class="input1" type="radio" value="guangpan" name="choose" id="style5">
        <label class="input1-label" for="style5"></label>
    </div>

</div>

</body>
</html>